<template>
  <el-main style="padding: 20px;">
    <el-button type="primary" size="mini" icon="el-icon-plus" @click="xinzeng=true">
      添加单词
    </el-button>
    <el-button type="primary" size="mini" icon="el-icon-plus" @click="delAll">
      删除
    </el-button>
    <!-- 新增 -->
    <el-dialog
      :visible.sync="xinzeng"
      width="80%">
      <el-form ref="form" :model="form" label-width="80px">
        <el-form-item label="单词">
          <el-input v-model="form.word" placeholder="about"></el-input>
        </el-form-item>
        <el-form-item label="音标">
          <el-input v-model="form.phonetic" placeholder="[ə´bændən] vt."></el-input>
        </el-form-item>
        <el-form-item label="释义">
          <el-input v-model="form.analysis" placeholder="抛弃；放纵"></el-input>
        </el-form-item>
        <el-form-item label="例句">
          <el-input type="textarea" v-model="form.example" placeholder="(多句用-隔开)abandoned + n. (children, wives, etc.)-abandon oneself to-They abandon themselves to gambling."></el-input>
        </el-form-item>
        <el-form-item label="例句翻译">
          <el-input type="textarea" v-model="form.explanation" placeholder="(多句用-隔开)遭人遗弃的（孩子、妻子等）-沉溺于-他们沉溺于赌博。"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="addword">确认</el-button>
          <el-button @click="tianjia=false">取消</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>
    <!-- 编辑 -->
    <el-dialog
      :visible.sync="bianji"
      width="80%">
      <el-form ref="form" :model="form" label-width="80px">
        <el-form-item label="单词">
          <el-input v-model="form.word" placeholder="about"></el-input>
        </el-form-item>
        <el-form-item label="音标">
          <el-input v-model="form.phonetic" placeholder="[ə´bændən] vt."></el-input>
        </el-form-item>
        <el-form-item label="释义">
          <el-input v-model="form.analysis" placeholder="抛弃；放纵"></el-input>
        </el-form-item>
        <el-form-item label="例句">
          <el-input type="textarea" v-model="form.example" placeholder="(多句用-隔开)abandoned + n. (children, wives, etc.)-abandon oneself to-They abandon themselves to gambling."></el-input>
        </el-form-item>
        <el-form-item label="例句翻译">
          <el-input type="textarea" v-model="form.explanation" placeholder="(多句用-隔开)遭人遗弃的（孩子、妻子等）-沉溺于-他们沉溺于赌博。"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="setWord">确认</el-button>
          <el-button @click="tianjia=false">取消</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>
    <!-- 单词 -->
    <div class="table-box">
      <el-table :data="list" style="width: 100%"  @selection-change="handleSelectionChange">
        <el-table-column
          type="selection"
          align="left"
        >
        </el-table-column>
        <el-table-column prop="word" label="单词"></el-table-column>
        <el-table-column prop="phonetic" label="音标"></el-table-column>
        <el-table-column prop="example" label="例句"></el-table-column>
        <el-table-column prop="explanation" label="例句翻译"></el-table-column>
        <el-table-column prop="analysis" label="释义"></el-table-column>
        <el-table-column label="操作">
          <template slot-scope="scope">
            <el-button @click="setbianji(scope.row)" type="text" size="mini">编辑</el-button>
            <el-button type="text" size="mini" @click="deleteObj(scope.row)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>

	  <el-pagination
	    background
	    layout="prev, pager, next"
	    :page-count="data.pages"
		:current-page="current"
		@current-change="chaxun"
		>
	  </el-pagination>
    </div>

  </el-main>
</template>

<script>
	export default {
    data(){
      return{
        data:[],
        current:1,
         form: {wordType:1},
         fileList: [],
        bianji:false,
        xinzeng:false,
        page:1,
        size:20,
        selectWord:[]
      }
    },
    created() {
      this.getWord()
    },
    inject: ['reload'],
    methods:{
      delAll(){
        let id = [];
        this.selectWord.forEach(item=>{
          id.push(item.wordId)
        })
        id = id.join(',')
        this.postRequest('/back/wordstores/deleteWord',{ids:id}).then(res=>{
          //console.log(res)
          this.$message(res.data.msg);
          this.reload();
        })
      },
      deleteObj(e){
        this.postRequest('/back/wordstores/deleteWord',{ids:e.wordId}).then(res=>{
          //console.log(res)
          this.$message(res.data.msg);
          this.reload();
        })
      },
      addword(){
        this.postJson('/back/wordstores/addWord',this.form).then(res=>{
          //console.log(res)
          this.$message(res.data.msg);
          this.reload();
        })
      },
      setbianji(e){
        //console.log(e);
        this.form = e;
        this.bianji =true;
      },
      chaxun(val) {
        //console.log(val);
        this.page = val;
        this.getWord();
      },
      handleSelectionChange(e){
        this.selectWord = e;
      },
       onSubmit() {
        let arr1 = this.form.example.split('-');
        //console.log(arr1)
        //console.log('submit!');
      },
      getWord(){
        let that =this;
        this.postRequest('/back/wordstores/queryWordList',{page:that.page,size:that.size},{header:{'Content-Type': 'application/x-www-form-urlencoded'
			}}).then(res=>{
          console.log(res)
          this.data = res.data.data;
          this.list = res.data.data.list;
          //console.log(this.list)
        })

      },
      setWord(){
        this.form.wordType=1;
        delete this.form.list
        this.postJson('/back/wordstores/updateWord?id='+this.form.wordId,this.form).then(res=>{
          console.log(res)
          this.$message(res.data.msg);
          this.reload();
        })
      },
    }
	}
</script>

<style scoped>

</style>
